<template>
  <div>
    comp
    {{ p1 }}←点击button这个值会发生改变,说明prop是响应式的
  </div>
</template>

<script>
import { watchEffect } from "@vue/composition-api";

/** props可以被监视*/
/*export default {
  setup(props, ctx) {
    watchEffect(() => {
      console.log(`p1 is: ` + props.p1);
    });
  },
  props: {
    p1: Number
  }
};*/

export default {
  /** 但如果你是通过解构拿到prop,那么该prop会丢失响应能力*/
  // setup({ p1 }, ctx) {
  //   watchEffect(() => {
  //     console.log(`p1 is: ` + p1); // 只会在组件创建时打印一次,但是p1在视图上仍然会刷新,只是watch不到它的变化了
  //   });
  // },

  /** setup 并不会因为prop改变而重新执行*/
  setup(props, ctx) {
    console.log(ctx);
    console.log("setup 并不会因为prop改变而重新执行");
    watchEffect(() => {
      console.log(`p1 is: ` + props.p1); // 只会在组件创建时打印一次,但是p1在视图上仍然会刷新,只是watch不到它的变化了
    });

    /** 不要直接更改父组件传递过来的prop,会报一个警告(虽然这个变更是有效的(这一刻的确改变了prop的值,也会影响在视图上的显示)，但只要父组件改变prop会,这个变更就被"顶掉"了,So,直接变更父组件的prop是不可靠的)*/
    /*
      [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "p1"
    */
    props.p1 = 222;
  },
  props: {
    p1: Number
  }
};
</script>

<style lang="scss" scoped></style>
